<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="../vue.js"></script>

<div class="app">
   <mycpn :number1="num1" @cum1change="num1change"> </mycpn>
</div>


<template id="mycpn">
    <div>
        <h2>props:{{number1}}</h2>
        <h2>data:{{dnumber1}}</h2>
        <input type="text" v-model="dnumber1">
    </div>
</template>


    <script>
        const app = new Vue({
            el:'.app',
            data: {
                num1 :1
            },
            methods:{
                num1change(value){
                    this.num1 = parseFloat(value)
                }
            },
            components: {
                mycpn:{
                    template:'#mycpn',
                    props: {
                        number1: Number,
                        name: ''
                    },
                    data () {
                        return {
                            dnumber1: this.number1,
                        }                    
                        },
                    watch: {
                        dnumber1(newValue){
                            this.dnumber1 = newValue*10;
                            this.$emit('cum1change', newValue);
                        }
                    }
                
                }
            }
       
        })


    </script>

</body>
</html>